import React, { useState } from "react";
import { ConfigProvider, Dropdown, Typography } from 'antd';
import {
    ApiOutlined,
    GithubOutlined,
    MenuOutlined,
    QuestionCircleOutlined,
} from '@ant-design/icons';
import Playground from '@/components/playground'
import BridgeIcon from '@/icons/BridgeIcon';
import PlaygroundIcon2 from '@/icons/PlaygroundIcon2';
import './App.less'
import './popup.less'
import './index.less'

export default function SidePanel() {


    const [popupTab, setPopupTab] = useState<string>('')
    const [currentMode, setCurrentMode] = useState<'playground' | 'bridge'>(
        'playground',
    );

    const menuItems = [
        {
            key: 'playground',
            icon: <PlaygroundIcon2 />,
            label: 'Playground',
            onClick: () => {
                setCurrentMode('playground');
                setPopupTab('playground');
            },
        },
        {
            key: 'bridge',
            icon: <BridgeIcon />,
            label: 'Bridge Mode',
            onClick: () => {
                setCurrentMode('bridge');
                setPopupTab('bridge');
            },
        },
    ];

    return <ConfigProvider>


        <div className="popup-wrapper">
            {/* top navigation bar */}
            <div className="popup-nav">
                <div className="nav-left">
                    <Dropdown
                        menu={{ items: menuItems }}
                        trigger={['click']}
                        placement="bottomLeft"
                        overlayClassName="mode-selector-dropdown"
                    >
                        <MenuOutlined className="nav-icon menu-trigger" />
                    </Dropdown>
                    <span className="nav-title">
                        {currentMode === 'playground' ? 'Playground' : 'Bridge Mode'}
                    </span>
                </div>
                <div className="nav-right">
                    <Typography.Link
                        href="https://github.com/web-infra-dev/midscene"
                        target="_blank"
                    >
                        <GithubOutlined className="nav-icon" />
                    </Typography.Link>
                    <Typography.Link
                        href="https://midscenejs.com/quick-experience.html"
                        target="_blank"
                    >
                        <QuestionCircleOutlined className="nav-icon" />
                    </Typography.Link>

                </div>
            </div>

            <div className="popup-content">
                {/* Playground Component */}
                <div className="playground-component">
                    <Playground
                        getAgent={(forceSameTabNavigation?: boolean) => {

                        }}
                        showContextPreview={false}
                    />
                </div>
            </div>

        </div>

    </ConfigProvider>
}